<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://material.angular.io/components/paginator/examples" target="_blank">demos & documentation</a>
</m-notice>


<m-material-preview [viewItem]="exampleBasic">
	<div class="m-section">
		<p class="m-section__sub">
			<code>&lt;mat-paginator&gt;</code> provides navigation for paged information, typically used with a table.
		</p>
		<div class="m-separator m-separator--dashed"></div>
		<div class="m-section__content">

			<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
			</mat-paginator>

		</div>
	</div>
</m-material-preview>

<m-material-preview [viewItem]="exampleConfig">
	<div class="m-section">
		<div class="m-section__content">

			<mat-form-field>
				List length:
				<input matInput [(ngModel)]="length">
			</mat-form-field>

			<mat-form-field>
				Page size:
				<input matInput [(ngModel)]="pageSize">
			</mat-form-field>
			<mat-form-field>
				Page size options:
				<input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)">
			</mat-form-field>

			<mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
			</mat-paginator>

			<div *ngIf="pageEvent">
				<h5>Page Change Event Properties</h5>
				<div>List length: {{pageEvent.length}}</div>
				<div>Page size: {{pageEvent.pageSize}}</div>
				<div>Page index: {{pageEvent.pageIndex}}</div>
			</div>

		</div>
	</div>
</m-material-preview>